/*实现悬浮目录的自动变色*/
export const menuAction = {
  mounted(){
    /*注意！由于一些奇奇怪怪的bug，此处获取到的sections和navigations会包含被切换掉的路由中的元素，
    但实际运行时其实问题不大*/
    const sections = document.querySelectorAll('.main-content > .section')
    const navigations = document.querySelectorAll('.menu-container li.custom')

    function adjustMenu(){
      navigations.forEach(li => {
        li.classList.remove('current')
      })
      for(let i = sections.length-1; i > -1; i--){
        if(sections[i].getBoundingClientRect().top < 400
          && sections[i].getBoundingClientRect().bottom > 20){
          navigations[i].classList.add('current')
          break
        }
      }
    }
    /*在页面未滚动时，也要触发响应变色，但需要等待路由切换动画结束*/
    setTimeout(() => {
      adjustMenu()
    }, 2000);
    window.addEventListener('scroll', adjustMenu)
  },
  beforeDestroy(){
    window.removeEventListener('scroll', this.adjustMenu) 
  }
}